<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>配置付款审核人</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .span-btn {
            position: absolute;
            left: 5px;
            margin-top: 4px;
            cursor: pointer;
        }

        .auditorName {
            text-align: center;
        }

        .select {
            color: #fff;
            background-color: #045B9E;
        }
    </style>
</head>
<body >
<div class="layout" style="padding-top: 10px;left:0px;right:0px;top:0px;bottom:0px;" id="app" >
<div class="center" style="text-align:center;">
    <table class="table-detail">
        <tr v-for="(item,i) in payAuditors">
            <td style="width:160px;">
                    <span class="span-btn">
                        <span style="font-size:20px;" @click="addAuditor"> + </span>
                        <span style="font-size:20px;" @click="delAuditor(i)"> - </span>
                    </span>
                <span>第{{i+1}}审核人</span>
            </td>
            <td>
                <input class="auditorName" type="text" v-model="item.auditorName" :idx="i"/></span>
            </td>
        </tr>
        <!--<tr>
            <td>付款人</td>
            <td>
                <div id="user" v-on:click.stop="inputFocus('txtPayer')">
                    <div v-for="(user,i) in payers" class="user"
                         v-bind:class="{ select: copierSelectedIdx == i }"
                         v-on:click="selectUser(i,'copierSelectedIdx')">{{user.payerName}};
                    </div>
                    <input class="pull-left payer" id="txtPayer" style="width:100px" type="text" @keyup.delete="deleteUser"/>
                </div>
            </td>
        </tr>-->
    </table>

</div>
    <div class="south" style="height:40px;line-height:40px;text-align: center;">
        <input class="btn oaBtn btn-sm" type="button" value="确认" @click="confirm"/>
    </div>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>

<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            copierSelectedIdx:-1,
            payAuditors: [
                {auditorId: '', auditorName: ''},
                {auditorId: '', auditorName: ''}
            ],
            payers:[

            ]
        },
        methods:{
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            selectUser: function (i, prop) {
                this.copierSelectedIdx = -1;
                this[prop] = i;
            },
            unselectUser: function () {
                this.copierSelectedIdx = -1;
            },
            deleteUser: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.copierSelectedIdx > -1) {
                        this.payers.splice(this.copierSelectedIdx, 1);
                        this.copierSelectedIdx = -1;
                    } else {
                        this.copierSelectedIdx = this.payers.length - 1;
                    }
                }
            },
            addAuditor:function () {
                this.payAuditors.push({auditorId: '', auditorName: ''});
                setTimeout(function () {
                    initAutoComplete();
                },500);
            },
            delAuditor:function (i) {
                this.payAuditors.splice(i,1);
            },
            confirm:function () {
                var payAuditors = new Array();
                for (var i = 0; i < this.payAuditors.length; i++) {
                    if(this.payAuditors[i].auditorId != ''){
                        payAuditors.push({auditorId:this.payAuditors[i].auditorId,auditorName:this.payAuditors[i].auditorName});
                    }
                }

                if(payAuditors.length==0){
                    alert("请填写付款审核人");
                    return;
                }
                $.wyui.postMethod(urlConfig.apply.money.submitPayAudit,{
                    ids:$.wyui.page.urlParams.ids,
                    payAuditors:payAuditors,
                    payers:this.payers
                },function () {
                    alert("申请付款成功");
                    parent.refresh();
//                    var $iframe = top.findIframeByName("用款申请");
//                    $iframe[0].contentWindow.refresh();
                    api.close();
                });
            }
        }
    });

    $(function () {
        initAutoComplete();
    });
    function initAutoComplete() {
        $(".auditorName,.payer").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if($(this).hasClass("auditorName")) {
                    var idx = $(this).attr("idx");
                    app.payAuditors[idx].auditorId = user.id;
                    app.payAuditors[idx].auditorName = user.name;
                }else if($(this).hasClass("payer")){
                    app.payers.push({payerId:user.id,payerName:user.name});
                    $(this).val("");
                }
                return false;
            },
            height: 210,
            width: 300
        });
    }
</script>
</body>
</html>